<template>
  <div class="page luckdraw-detail-editor">
    <div class="luckdraw-detail-editor-container">
      <div class="edit-section">
        <div class="item" v-for="(item, i) in editContent" :key="i">
          <div v-if="item.type === 'text'">
            <textarea v-model="editContent[i].content"
              placeholder="请输入文本（120字以内）" placeholder-style="color:#cacaca" maxlength="120"></textarea>
            <i class="icon-close" :style="minusIcon" @click="onMinusIconClick(i)"></i>
          </div>
          <div v-else>
            <img :src="editContent[i].content || icons.awardBg" mode="widthFix"/>
            <i class="icon-close" :style="minusIcon" @click="onMinusIconClick(i)"></i>
            <a @click="onChangeImageClick(i)">更改图片</a>
          </div>
        </div>
      </div>
      <div class="add-tool">
        <div class="item" @click="onAddTextClick">
          <i class="icon-text" :style="addText"></i>
          <span>添加文本</span>
        </div>
        <div class="item" @click="onAddImageClick">
          <i class="icon-image" :style="addImage"></i>
          <span>添加图片({{imageCount}}/3)</span>
        </div>
      </div>
      <div class="btn-section">
        <div class="btn-inner">
          <m-button text="完成" @onClick="onSaveBtnClick"></m-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import { setStorage } from '@/utils/wx'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton
  },
  data () {
    return {
      icons: {
        addText: `${require('static/images/add-text.png')}`,
        addImage: `${require('static/images/add-image.png')}`,
        awardBg: `${require('static/images/award-bg.png')}`,
        minus: `${require('static/images/minus.png')}`
      },
      editContent: [
        {
          type: 'text',
          content: ''
        },
        {
          type: 'image',
          content: ''
        }
      ]
    }
  },
  computed: {
    addText () {
      return `background-image: url(${this.icons.addText});`
    },
    addImage () {
      return `background-image: url(${this.icons.addImage});`
    },
    minusIcon () {
      return `background-image: url(${this.icons.minus});`
    },
    imageCount () {
      let count = 0
      const editContent = this.editContent
      for (let i = 0; i < editContent.length; i++) {
        if (editContent[i].type === 'image') {
          count++
        }
      }
      return count
    }
  },
  mounted () {
    this.resetData()
  },
  methods: {
    /**
     * 更改奖品图片
     */
    onChangeImageClick (i) {
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 返回选定照片的本地文件路径列表
          this.editContent[i].content = res.tempFilePaths[0]
        }
      })
    },
    /**
     * 添加文本
     */
    onAddTextClick () {
      const editContent = this.editContent
      const single = {
        type: 'text',
        content: ''
      }
      this.editContent = editContent.concat(single)
    },
    /**
     * 添加图片
     */
    onAddImageClick () {
      if (this.imageCount < 3) {
        const editContent = this.editContent
        const single = {
          type: 'image',
          content: ''
        }
        this.editContent = editContent.concat(single)
      }
    },
    /**
     * 删除编辑项
     */
    onMinusIconClick (i) {
      const editContent = this.editContent
      // 删除数组某一项
      editContent.splice(i, 1)
      this.editContent = editContent
    },
    /**
     * 完成，保存
     */
    async onSaveBtnClick () {
      const data = JSON.stringify(this.editContent)
      await setStorage('editContent', data)
      // 创建成功
      wx.showToast({
        title: '编辑成功'
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-detail-editor {
  &-container {
    padding: 50rpx 0;
  }
  .edit-section {
    margin: 0 30rpx;
    .item {
      position: relative;
      margin-bottom: 50rpx;
      padding: 20rpx 20rpx 30rpx;
      background-color: #fff;
      textarea {
        width: 100%;
        height: 200rpx;
        font-size: 30rpx;
        line-height: 40rpx;
      }
      img {
        display: block;
        width: 100%;
      }
      i {
        display: block;
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        margin-left: -20rpx;
        width: 40rpx;
        height: 40rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
      a {
        display: block;
        position: absolute;
        top: 34rpx;
        right: 34rpx;
        font-size: 28rpx;
        color: #333;
        text-align: center;
        background-color: #fff;
        border: 1rpx solid #575757;
        padding: 10rpx 20rpx;
        &:active {
          background: #d8d8d8;
        }
      }
    }
  }
  .add-tool {
    display: flex;
    margin: 30rpx 30rpx;
    border: 1rpx solid #e6ebf0;
    .item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30rpx 0;
      font-size: 30rpx;
      color: #333;
      background-color: #fff;
      &:active {
        background-color: #e6ebf0;
      }
      &:not(:last-child) {
        border-right: 1rpx solid #e6ebf0;
      }
      i {
        display: block;
        width: 30rpx;
        height: 30rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin-right: 14rpx;
      }
    }
  }
  .btn-section {
    width: 100%;
    .btn-inner {
      padding: 20rpx 20rpx;
    }
  }
}
</style>
